<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>薪资结构管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">


    <el-button @click="toAdd">添加薪资结构</el-button>
    <el-button @click="goShigu">事故列表</el-button>
    <el-button @click="empList">员工列表</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="name"
                label="薪资结构名称">
        </el-table-column>
        <el-table-column
                prop="jibengongzi"
                label="基本工资">
        </el-table-column>
        <el-table-column
                prop="jiaotongbuzhu"
                label="交通补助">
        </el-table-column>
        <el-table-column
                prop="wucanbuzhu"
                label="午餐补助">
        </el-table-column>
        <el-table-column
                prop="jiangjin"
                label="奖金">
        </el-table-column>
        <el-table-column
                label="启用时间">
            <template slot-scope="scope">
                {{scope.row.qiyongshijian | format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column label="养老金">
            <el-table-column
                    prop="yanglaojinbili"
                    label="比例">
            </el-table-column>
            <el-table-column
                    prop="yanglaojinjishu"
                    label="基数">
            </el-table-column>
        </el-table-column>

        <el-table-column label="医疗保险">
            <el-table-column
                    prop="yiliaobaoxianbili"
                    label="比例">
            </el-table-column>
            <el-table-column
                    prop="yiliaobaoxianjishu"
                    label="基数">
            </el-table-column>
        </el-table-column>

        <el-table-column label="公积金">
            <el-table-column
                    prop="gongjijinbili"
                    label="比例">
            </el-table-column>
            <el-table-column
                    prop="gongjijinjishu"
                    label="基数">
            </el-table-column>
        </el-table-column>
        <el-table-column
                prop="deptNames"
                label="适用部门">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button>编辑</el-button>
                <el-button>删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="添加薪资结构" :visible.sync="dialogFormVisible" width="80%">


        <div style="display: flex;">

            <div style="width: 60%;">
                <el-steps :active="active" finish-status="success" direction="vertical">
                    <el-step title="基本工资">这是第一步</el-step>
                    <el-step title="交通补助">这是第二步</el-step>
                    <el-step title="午餐补助">这是第三步</el-step>
                    <el-step title="奖金">这是第三步</el-step>
                    <el-step title="养老金比例">这是第三步</el-step>
                    <el-step title="养老金基数">这是第三步</el-step>
                    <el-step title="医疗保险比例">这是第三步</el-step>
                    <el-step title="医疗保险基数">这是第三步</el-step>
                    <el-step title="公积金比例">这是第三步</el-step>
                    <el-step title="公积金基数">这是第三步</el-step>
                    <el-step title="结构名称">这是第三步</el-step>
                    <el-step title="适用部门">这是第三步</el-step>
                </el-steps>
            </div>
            <div>
                <el-input placeholder="基本工资" v-if="active==0" v-model="form.jibengongzi"></el-input>
                <el-input placeholder="交通补助" v-if="active==1" v-model="form.jiaotongbuzhu"></el-input>
                <el-input placeholder="午餐补助" v-if="active==2" v-model="form.wucanbuzhu"></el-input>
                <el-input placeholder="奖金" v-if="active==3" v-model="form.jiangjin"></el-input>
                <el-input placeholder="养老金比例" v-if="active==4" v-model="form.yanglaojinbili"></el-input>
                <el-input placeholder="养老金基数" v-if="active==5" v-model="form.yanglaojinjishu"></el-input>
                <el-input placeholder="医疗保险比例" v-if="active==6" v-model="form.yiliaobaoxianbili"></el-input>
                <el-input placeholder="医疗保险基数" v-if="active==7" v-model="form.yiliaobaoxianjishu"></el-input>
                <el-input placeholder="公积金比例" v-if="active==8" v-model="form.gongjijinbili"></el-input>
                <el-input placeholder="公积金基数" v-if="active==9" v-model="form.gongjijinjishu"></el-input>
                <el-input placeholder="结构名称" v-if="active==10" v-model="form.name"></el-input>

                <!--部门级联选择框-->
                <el-cascader v-if="active==11"
                        v-model="form.deptIds"
                        :options="options"></el-cascader>
            </div>

        </div>





        <el-button style="margin-top: 12px;" @click="prev" v-if="active>0">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active<11">下一步</el-button>
        <el-button style="margin-top: 12px;" @click="addSalary" v-if="active==11">提交</el-button>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            query:{
                page:1,
                pageSize:2
            },

            //表单需要
            dialogFormVisible: false,
            form: {
                name: '',
            },
            active: 0,//步骤条需要的参数
            options:[],//级联选择器需要的数据

        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{
            empList(){
                window.open("empList.html")
            },
            goShigu(){
                window.open("shigu.html")
            },
            addSalary(){
                this.form.deptIds = this.form.deptIds.join(",");//[1,2]--->"1,2"

                axios.post("/salary-constructor/add",this.form).then(res=>{

                    this.$message.success("成功")
                    this.form = {}
                    this.dialogFormVisible = false;
                    this.initData();

                })


            },
            prev(){
                this.active--;
            },
            next() {
                this.active++;
            },
            toAdd(){
                this.dialogFormVisible = true;
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
            },
            handleCurrentChange(val) {
                this.query.page = val;
            },
            initData(){
                axios.post(`/salary-constructor/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })

            },
            initDeptData(){
                axios.post("/dept/findDeptList").then(res=>{
                    this.options = res.data;
                })
            },

        },
        created(){
            this.initDeptData();
            this.initData()
        }
    })
</script>




</body>
</html>
